<template>
	<view class="dialog">
		<el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleDialogClose">
			<!-- 新增广告主 -->
			<el-form ref="form" :model="form" label-width="130px" :rules="rules">
				<el-form-item label="广告主" class="item" prop="name">
					<el-input v-model="form.name" placeholder="请输入广告主"></el-input>
				</el-form-item>
				<!-- <el-form-item label="标签" class="item" prop="label">
					<el-input v-model="form.label" placeholder="请输入标签"></el-input>
				</el-form-item> -->
				<el-form-item label="落地页" class="item" prop="link">
					<el-input v-model="form.link" placeholder="请输入落地页"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleClose(true)" v-preventReClick>{{ getBtnTitle(title) }}</el-button>
				<el-button @click="handleClose(false)">取 消</el-button>
			</span>
		</el-dialog>
	</view>
</template>
<script>
	import {
		Request
	} from '../../model/request.js'
	import {
		Util
	} from '../../utils/util.js'
	// import {
	// 	config
	// } from "../../api/config.js";
	// import {
	// 	ServerUrl
	// } from "../../api/server_url.js";
	export default {
		props: {
			dialogVisible: '',
			second: '',
			title: '',
			code: ''
		},
		
		data() {
			return {
				form: {
					link: '',
					label: '',
					name: '',
					codeBase64: ''
				},
				rules: {
					link: [{
							required: true,
							message: '请输入落地页',
							trigger: 'blur'
						},
						{
							pattern: /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/,
							message: '输入不正确，请重新输入'
						}
					],
					label: [{
						required: true,
						message: '请输入标签',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入广告主',
						trigger: 'blur'
					}]
				}
			}
		},
		
		watch: {
			code(newVal) {
				if (!newVal) {
					this.$refs.qrcode && this.$refs.qrcode._clearCode()
				}
			}
		},
		
		methods: {
			getBtnTitle(t) {
				// if (t == '新增二维码') {
				// 	return '提交'
				// } else {
				// 	return '下载'
				// }
				return '提交'
			},
			
			handleDialogClose(flag=false) {
				this.form = {
					link: '',
					label: '',
					name: ''
				}
				if (this.title == '新增二维码') {
					this.$refs.form.clearValidate()
				}
				this.$emit('closeDialog', flag)
				if (this.title == '新增广告主') {
					this.$nextTick(() => {
						this.$refs.form.clearValidate()
					})
				}
			},
			
			async handleClose(e) {
				if (e == true) {
					this.$refs.form.validate(async (valid) => {
						if (valid) {
							console.log(this.form, 'valid')
							let res = await Request.SALESADD(this.form.name, this.form.link)
							if (res.code == 200) {
								Util.showToast('新增成功')
								this.handleDialogClose(true)
							}
						}
					})
				} else {
					this.handleDialogClose()
				}
			},
			
			loadCode(imgsrc, name) {
			  let image = new Image();
			  // 解决跨域 Canvas 污染问题
			  image.setAttribute("crossOrigin", "anonymous");
			  image.onload = function () {
				let canvas = document.createElement("canvas");
				canvas.width = image.width;
				canvas.height = image.height;
				let context = canvas.getContext("2d");
				context.drawImage(image, 0, 0, image.width, image.height);
				let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
				let a = document.createElement("a"); // 生成一个a元素
				let event = new MouseEvent("click"); // 创建一个单击事件
				a.download = name || "code"; // 设置图片名称
				a.href = url; // 将生成的URL设置为a.href属性
				a.dispatchEvent(event); // 触发a的单击事件
			  };
			  image.src = imgsrc;
			},

			qrR(e) {
				this.codeBase64 = e
				// console.log(e, 'qrR')
			}
		}
	}
</script>
<style scoped>
	.dialog {
		/* width: 100%;
	height: 100%; */
		position: absolute;
		left: 0;
		top: 0;
	}

	.el-form-item {
		position: relative;
	}

	.el-form-item::before {
		content: '*';
		position: absolute;
		left: 100px;
		top: 13px;
		color: red;
	}

	/deep/ .item .el-form-item__label {
		position: relative;
		left: -20px;
		/* color: red;
		border: solid 1px red;
		margin-left: 30px; */
	}

	/deep/ .item .el-form-item__label::before {
		content: ' ' !important;
	}

	.photo {
		width: 299px;
		height: 200px;
	}
	
	.code-content {
		text-align: center;
	}
</style>
